<template>
  <div class="container" ref="container">
    <div>
      <div class="hot-city">
        <p>热门城市</p>
        <ul class="city-choice">
          <li v-for="(items,index) in hotcityList"  @click="changeCity(items.name)" :key="index">
            <span>{{items.name}}</span>
          </li>
        </ul>
      </div>
      <div class="citylist">

        <h3>字母排序</h3>
        <ul class="city-letter">
          <li v-for="(items,index) in CitiesNameList"   @click="changeName(index)" :key="index">
            <span>{{index}}</span>
          </li>
        </ul>
        <ul class="letter" v-for="(items,index) in CitiesNameList"  :ref="index" :key="index">
          <h2>{{index}}</h2>
          <li v-for="(val,idx) in items"  @click="changeCity(val.name)" :key="idx">{{val.name}}</li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>
  import BScroll from "better-scroll"
  import {mapMutations} from "vuex"


  export default {
    name: "Cities",
    props: ["hotcityList", "CitiesNameList"],
    data() {
      return {
        scroll:""
      }
    },
    mounted() {
      // console.log(this.$refs.container)
      let container = this.$refs.container;
         this.scroll=new BScroll(container,{click:true})
    },
    methods: {
      changeName(sortName) {
        // alert(keys)
        // console.log(this.$refs[sortName][0])
       this.scroll.scrollToElement(this.$refs[sortName][0])
      },
      changeCity(cityName){
           // alert(cityName)
          this.changName(cityName);
           this.$router.push("/")
      },
      ...mapMutations(["changName"])


    }
  }
</script>

<style>
  .container {
        position: absolute;
        overflow: hidden;
        top: 5rem;
        left: 0;
        right: 0;
        bottom: 0;
  }
  .container>div{
        margin-bottom: 5rem;
  }


  .hot-city {
    width: 100%;
  }

  .hot-city p {
    background: #ddd;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    padding-left: 10px;
    box-sizing: border-box;


  }

  .hot-city .city-choice li {
    width: 33.33%;
    float: left;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }

  .hot-city .city-choice li span {
    text-decoration: none;
    color: black;
  }


  .citylist h3,
  .letter h2 {
    clear: both;
    background: #F0F0F0;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .citylist .city-letter{
    clear: both;
  }
  .citylist .city-letter li {
    width: 16.6%;
    float: left;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;

  }

  .citylist .city-letter li span {
    text-decoration: none;
    color: black;
    display: block;
  }

  .letter li {
    width: 33.33%;
    float: left;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
</style>
